<template>  
  <view class="group-member-page">  
    <view :style="{ height: statusBarHeight + 'px' }"></view>  
    <view class="nav-container">  
      <view class="nav-search">  
        <image class="search-icon" src="../../../static/yonghu1.png" mode="aspectFill" />  
        <input  
          class="search-input"  
          v-model.trim="inputValue"  
          type="text"  
          placeholder="搜索好友"  
          placeholder-style="color: #ADB3BA"  
          
        />  
        
      </view>  
    </view>  
<!-- 经过过滤的成员列表 -->
    <view class="main-container">  
      <scroll-view  
        v-if="filteredMemberList.length && finished"  
        class="member-list"  
        :style="computedHeight"  
        scroll-y  
        enable-back-to-top  
        scroll-with-animation  
        :scroll-into-view="toView"  
        :scroll-top="scrollTop"  
        @scroll="onScroll"  
      >  
	  <!-- 循环生成分组视图 -->
        <view class="list-wrap" v-for="(v, i) in filteredMemberList" :key="i" :id="v.sign === '#' ? 'intoView_' : 'intoView' + v.sign">
			<!-- 显示分组标题，包括分组标识和成员数量 -->
          <view class="category">{{ v.sign }} ({{ v.list.length }}人)</view>
			<!-- 循环生成每个分组中的成员列表 -->
          <view class="list-item" v-for="(item, index) in v.list" :key="index">
			  <!-- 显示成员头像，若未提供头像，则显示默认头像 -->
            <image class="list-item-img" :src="item.headUrl || '../../../static/yonghu1.png'" style="width: 50px; height: 50px;" />
			<!-- 显示成员的名称，优先显示 displayName，如果没有则显示 nickName -->
            <view class="list-item-name">{{ item.displayName || item.nickName }}</view>  
          </view>  
        </view>  
      </scroll-view>  
<!-- 当没有成员时显示的占位视图 -->
      <view v-if="!filteredMemberList.length && finished" class="empty-wrap">
		  <!-- 显示一张空状态图像 -->
        <image class="empty-img" src="../../../static/yonghu1.png" mode="aspectFill" />  
      </view>  
<!-- 创建字母索引列表，用于快速跳转 -->
      <view class="letter-list"> 
	  <!-- 显示“回到顶部”的按钮，设置了动态类名，根据 activeLetter 是否为 ↑ 来改变样式 -->
        <view :class="['letter-item', activeLetter === '↑' ? 'active' : '']" @click.stop="toTop" @touchend.stop="handleTouchEnd">↑
		<!--  如果当前活动字母是“↑”，则显示一个激活状态的指示 -->
          <view v-if="activeLetter === '↑'" class="active-letter">↑</view>  
        </view> 
		<!-- 循环生成字母索引视图，动态类名及点击事件，点击后调用 toLetter 方法以处理字母跳转 -->
        <view  
          v-for="(item, index) in allLetterList"  
          :key="index"  
          :class="['letter-item', activeLetter === item ? 'active' : '']"  
          @click.stop="toLetter(item)"  
          @touchend.stop="handleTouchEnd"  
        >  
          {{ item }}
		   <!-- 如果该字母是活动字母，则显示激活状态的指示 -->
          <view v-if="activeLetter === item" class="active-letter">{{ item }}</view>  
        </view>  
      </view>  
    </view>  
  </view>  
</template>  

<script>  
import pinyin from 'js-pinyin';  

export default {  
  data() {  
    return {  
      statusBarHeight: 0,//状态栏高度  
      numberId: '',  
      groupNo: '',  
      allLetterList: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#'.split(''),  
      memberList: [  
        { sign: 'A', list: [{ displayName: '啊A', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'B', list: [{ displayName: '把B', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'C', list: [{ displayName: '吃C', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'D', list: [{ displayName: '都D', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'E', list: [{ displayName: '饿E', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'F', list: [{ displayName: '烦F', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'G', list: [{ displayName: '个G', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'H', list: [{ displayName: '好H', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'I', list: [{ displayName: 'iI', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'J', list: [{ displayName: '加J', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'K', list: [{ displayName: '看K', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'L', list: [{ displayName: '来L', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'M', list: [{ displayName: '母M', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'N', list: [{ displayName: '你N', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'O', list: [{ displayName: '哦O', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'P', list: [{ displayName: '噗P', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'Q', list: [{ displayName: '去Q', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'R', list: [{ displayName: '人R', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'S', list: [{ displayName: '是S', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'T', list: [{ displayName: '他T', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'U', list: [{ displayName: 'uU', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'V', list: [{ displayName: 'v V', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'W', list: [{ displayName: '我W', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'X', list: [{ displayName: '想X', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'Y', list: [{ displayName: '要Y', headUrl: '../../../static/yonghu1.png' }] },  
        { sign: 'Z', list: [{ displayName: '在Z', headUrl: '../../../static/yonghu1.png' }] },  
      ],  
      scrollTop: 0, //当前滚动位置 
      oldScrollTop: 0, //上次滚动位置 
      toView: '',  //滚动目标
      activeLetter: '',  //活动字母
      inputValue: '',  
      finished: true,  //加载状态
    };  
  },  

  computed: {  
    computedHeight() {  
      return { height: `calc(100vh - ${this.statusBarHeight}px - 98rpx)` };  
    },  

    filteredMemberList() {  
      if (!this.inputValue) return this.memberList;  
      return this.memberList.map(group => ({  
        sign: group.sign,  
        list: group.list.filter(member =>   
          (member.displayName || '').includes(this.inputValue) ||   
          (member.nickName || '').includes(this.inputValue)  
        )  
      })).filter(group => group.list.length > 0);  
    },  
  },  

  onLoad(options)  {  
    const info = uni.getSystemInfoSync();  
    this.statusBarHeight = info.statusBarHeight;  
    this.groupNo = options.groupNo || '';  
    this.numberId = uni.getStorageSync('numberId');  
  },  

  onShow() {  
    this.scrollTop = 0;  
    this.getList();  
  },  

  methods: {  
    getList() {  
      // Simulated data is already defined in memberList  
    },  

    onScroll(e) {  
      this.oldScrollTop = e.detail.scrollTop;  
    },  

    toTop() {  
      this.activeLetter = '↑';   
      this.scrollTop = this.oldScrollTop;   
      this.$nextTick(() => {  
        this.scrollTop = 0;   
      });  
    },  

    toLetter(e) {  
      this.activeLetter = e;   
      this.toView = e === '#' ? 'intoView_' : 'intoView' + e;   
    },  

    handleTouchEnd() {  
      setTimeout(() => {  
        this.activeLetter = '';   
      }, 600);  
    },  


  },  
};  
</script>  

<style scoped>  
.group-member-page {  
  background: #ffffff;  
  height: 100vh;  
  overflow: hidden;  

  .nav-container {  
    width: 100%;  
    height: 88rpx;  
    position: relative;  
    display: flex;  
    align-items: center;  
    z-index: 999;  
    background-color: #fff;  
    padding: 10rpx 40rpx 10rpx 24rpx;   
    
    .nav-search {  
      flex: 1;  
      height: 68rpx;  
      background: #f6f7f8;  
      border-radius: 34rpx;  
      display: flex;  
      align-items: center;  
      padding: 0 24rpx;  

      .search-icon {  
        width: 26rpx;  
        height: 26rpx;  
        flex-shrink: 0;  
        margin-right: 20rpx;  
      }  
      .search-input {  
        flex: 1;  
        font-size: 28rpx;  
        line-height: 36rpx;  
        height: 36rpx;  
        color: #2a343e;  
      }  
      .del-icon {  
        flex-shrink: 0;  
        width: 32rpx;  
        height: 32rpx;  
        padding-left: 16rpx;  
      }  
    }  
  }  

  .main-container {  
    width: 100%;  
    height: 100%;  
    padding: 10rpx 50rpx 0 24rpx;  
    box-sizing: border-box;  
    overflow-y: auto;  
    position: relative;  

    .empty-wrap {  
      padding: 80rpx 0;  
      text-align: center;  

      .empty-img {  
        width: 310rpx;  
        height: 310rpx;  
        background-size: cover;  
      }  
    }  

    .member-list {  
      box-sizing: border-box;  
    }  

    .list-wrap {  
      padding-top: 30rpx;  

      .category {  
        font-size: 24rpx;  
        font-family: OPPOSans, OPPOSans-Medium;  
        font-weight: 500;  
        color: #adb3ba;  
        line-height: 32rpx;  
        margin-bottom: 20rpx;  
      }  

      .list-item {  
        display: flex;  
        align-items: center;  
        margin-bottom: 40rpx;  

        &-img {  
          width: 70rpx;  
          height: 70rpx;  
          background: #d8d8d8;  
          flex-shrink: 0;  
          border-radius: 50%;  
        }  
        &-name {  
          flex: 1;  
          font-size: 28rpx;  
          font-family: OPPOSans, OPPOSans-Medium;  
          font-weight: 500;  
          color: #2d3f49;  
          line-height: 36rpx;  
          padding: 20rpx 16rpx 14rpx;  
        }  
      }  

      .list-item:last-child {  
        margin-bottom: 0;  
      }  
    }  

    .letter-list {  
      width: 32rpx;  
      text-align: center;  
      position: absolute;  
      top: 50%;  
      right: 6rpx;  
      transform: translateY(-50%);  
      padding-bottom: 40rpx;  
      z-index: 10;  

      .letter-item {  
        width: 32rpx;  
        height: 32rpx;  
        display: flex;  
        align-items: center;  
        justify-content: center;  
        font-size: 22rpx;  
        font-family: OPPOSans, OPPOSans-Medium;  
        font-weight: 500;  
        color: #999999;  
        line-height: 32rpx;  
        position: relative;  

        .active-letter {  
          position: absolute;  
          top: -31rpx;  
          left: -304rpx;  
          width: 94rpx;  
          height: 94rpx;  
          display: flex;  
          align-items: center;  
          justify-content: center;  
          background: #cccccc;  
          border-radius: 50%;  
          z-index: 999;  
          font-size: 50rpx;  
          color: #ffffff;  
        }  
      }  

      .active {  
        width: 32rpx;  
        height: 32rpx;  
        background: #fb5c4e;  
        color: #fff;  
        border-radius: 50%;  
      }  
    }  
  }  
}  
</style>